<template>
	<view>
		<view class="top_bg">
			<uNavbar title="" bgColor="transparent"></uNavbar>
		</view>
		<!-- 轮播 -->
		<view class="brand_island">
			<swiper class="swiper" keyName="image_path"  circular interval="3000" duration="500" autoplay >
				<swiper-item v-for="(item,index) in brandList" :key="index">
					<view class="swiper_box flex_c" @click="changeUrl(item.url)">
						<image :src="item.image_path" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 课程分类 -->
		<view class="curriculum flex_Z">
			<text>课程分类</text>
			<view class="course_list flex_left">
				<view class="course_box flex_left" v-for="(item,index) in courseList" :key="index" @click="goNextPage(item)">
					<view class="course flex_ZC">
						<image :src="item.image" mode="aspectFill"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {article} from "../../api/index.js";
	export default {
		data() {
			return {
				brandList: [],//轮播
				courseList: []//文章
			}
		},
		onLoad() {
			this.isArticle()
		},
		methods: {
			// 初始化列表
			isArticle() {
				article().then(res => {
					console.log(res);
					this.brandList = res.data.banner_list
					this.courseList = res.data.category_list 
				})
			},
			goNextPage(item) {
				uni.navigateTo({
					url: '/pagesMy/DAOCenter/newcomerSee?id=' + item.id + '&name=' + item.name
				})
			},
			// 跳转页面
			changeUrl(url){
				console.log(url);
				// 截取路径
				var domain = url.indexOf('fulezhenxuan');
				if(domain != -1){
					var path = url.split('#');
					console.log('1111', path[1])
					// console.log('2222',path[1].split("?")[0]);
					// console.log('3333',path[1].split("?")[1]);
					let urls = path[1]
					uni.navigateTo({
						url:urls
					})
				}
			}
		},
	}
</script>
<style>
	page {
		background: #211E38;
	}
</style>
<style scoped>
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.top_bg {
		display: flex;
		align-items: center;
		width: 100%;
		height: 300rpx;
		background: url(../../static/image/bg3.png);
		background-size: 100% 100%;
	}

	.brand_island {
		width: 92%;
		height: 308rpx;
		margin-top: 30rpx;
		margin: 0 auto;
		transform: translateY(-130rpx);
	}

	.swiper {
		width: 700rpx;
		height: 308rpx;
	}

	.swiper_box {
		position: relative;
		width: 700rpx;
		height: 308rpx;
		line-height: 308rpx;
		text-align: center;
		background: #00000025;
		border-radius: 80rpx;
		border-radius: 20rpx;
	}

	.swiper_box>image {
		width: 100%;
		height: 100%;
		z-index: 2;
		border-radius: 20rpx;
	}

	.emptys {
		width: 100%;
		height: 100rpx;
	}

	.curriculum>text {
		font-family: iconfont2;
		font-size: 44rpx;
		color: #ffffff;
		margin-left: 30rpx;
	}

	.course_list {
		width: 94%;
		margin: 30rpx auto 0;
	}

	.course_box {
		width: 30%;
		margin: 14rpx 10rpx;
	}

	.course {
		width: 216rpx;
		height: 336rpx;
		background: linear-gradient(-90deg, rgba(0, 20, 255, 0.4), rgba(255, 44, 223, 0.4));
		border-radius: 8rpx;
	}

	.course>image {
		width: 208rpx;
		height: 264rpx;
		margin: 6rpx 2rpx;
	}

	.course>text {
		font-size: 28rpx;
		color: #ffffff;
		margin-top: 10rpx;
	}
</style>